import { MyHead } from "../../components/head"
import { ShrinkOutline} from 'antd-mobile-icons'
import { useTiaoZhuan } from "../../hooks/routers"
import { SearchBar ,Result,List} from "antd-mobile"
import {useState} from 'react'
import { getSearchList } from "../../api/home"
import { useDispatch, useSelector } from "react-redux"
import { SmileOutline , AppstoreOutline } from 'antd-mobile-icons'
import { AppDispatch, RootReducer } from "../../types/store"
import { chnageSearch } from "../../rtk/reduers/data"
import MyList from "../../components/myList"
import _ from 'lodash'
export const MySearch = ()=>{
    const dispatch:AppDispatch = useDispatch();
    const searchHistory = useSelector<RootReducer,string[]>(s=>s.MyData.searchList)
    const {Tz}  = useTiaoZhuan();
    const [defaultData,setDefaultData] = useState('')
    const [list,setList] = useState<addmsType[]>([]);
    const [flag,setFlag] = useState(false)
    const getSearchData = async(v:string)=>{
        let res = await getSearchList(v);
        if(res.code == 200){
            setList(res.result)
        }
    }
    const onSearch =(v:string)=>{
        setFlag(true)
        setDefaultData(v)
        let vKB = [...searchHistory];
        if(searchHistory.includes(v)){
            let index = searchHistory.findIndex(item=>item == v);
            vKB.splice(index,1)
            vKB.push(v)
        }else{
            vKB.push(v)
        }
        dispatch(chnageSearch(vKB))
        getSearchData(v)
    }
    const onCancel = ()=>{
        setFlag(false)
    }
    return (
        <div>
            <MyHead title='搜索' >
                <ShrinkOutline onClick={()=>Tz(-1)}/>
            </MyHead>
            <div className="search-bar" style={{paddingTop:"50px"}}>
                    <SearchBar onSearch={onSearch} onCancel={onCancel} placeholder='请输入内容' value={defaultData} onChange={(v)=>setDefaultData(v)} showCancelButton={() => true} />
            </div>
            <div>
                    {
                        flag ?
                        <div>
                           <MyList list={list}></MyList>
                        </div>
                        :
                        <div>
                            <Result
                                icon={<SmileOutline />}
                                status='success'
                                title='请点击搜索相关的面试题'
                                description='搜索 (公司名称，地址 ,内容 ，技术分类)'
                                />
                            <div className="listl mt10" style={{}}>
                                {
                                    searchHistory.length> 0 && <List header='操作列表'>
                                    {
                                        _.map(searchHistory.slice(-8).reverse(),(item,index)=>{
                                            return (
                                                <List.Item onClick={()=>onSearch(item)} key={index} prefix={<AppstoreOutline />}  >
                                                    {item}
                                                </List.Item>
                                            )
                                        })
                                    }
                                </List>
                                }
                            </div>
                        </div>
                    }
                </div>
        </div>
    )
}